<template>
  <div>
    <el-menu-item v-for="(item, index) in menuData"
                  :index="subIndex+'-'+index"
                  class="aside-menu-item"
                  :key="index"
                  @click="clickItem(item, subIndex)">
      {{item.name}}
    </el-menu-item>
  </div>

</template>

<script>
  export default {
    name: "AsideMenuItem",
    props: {
      menuData: {
        type: Array,
        default() {
          return [
            {
              name: '员工列表',
              path: '/employee'
            }
          ];
        }
      },
      subIndex: {
        type: Number,
        default(){
          return 1;
        }
      }
    },
    methods: {
      clickItem(item){
        this.$bus.emit('clickMenuItem', {
          path: item.path,
          index: this.subIndex
        });
      }
    }
  }
</script>

<style scoped>
  .el-menu-item.is-active {
    color: #409eff;
    background-color: rgba(135, 206, 250, 0.3);
    border-bottom: 2px solid #409eff;
  }
  .aside-menu-item {
    font-size: 16px;
    color: #545c64;
    padding-left: 35px !important;
  }
  .aside-menu-item:hover {
    background-color: rgba(135, 206, 250, 0.3);
  }
</style>